import { defineComponent, reactive, onMounted } from 'vue'
import Draw from './draw'

export default defineComponent({
  components: {
    Draw
  },
  setup() {
    const cdata = reactive({
      category: [
        "2021-06",
        "2021-07",
        "2021-08",
        "2021-09",
        "2021-10",
        "2021-11",
        "2021-12",
        "2022-01",
        "2022-02",
        "2022-03",
        "2022-04",
        "2022-05",
      ],
      lineData: [
        18,
        20,
        24,
        28,
        32,
        36,
        39,
        44,
        48,
        50,
        56,
        62,
      ],
      barData: [
        4,
        5,
        5,
        6,
        7,
        8,
        9,
        12,
        14,
        21,
        23,
        24,
      ],
      rateData: []
    })

    // methods
    const setData = () => {
      for (let i = 0; i < cdata.barData.length; i++) {
        const rate = cdata.barData[i] / (cdata.lineData[i]+cdata.barData[i]);
        cdata.rateData.push(rate.toFixed(2));
      }
    }

    // 生命周期
    onMounted(() => {
      setData()
    })

    return () => {
      return <div>
        <Draw cdata={cdata} />
      </div>
    }
  }
})